<template>
    <section>

        <!--高级查询工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getUsers">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
            <el-radio v-model="radio" label="1">上架</el-radio>
            <el-radio v-model="radio" label="0">下架</el-radio>
        </el-col>

        <!--列表-->
        <el-table :data="pet"  v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <!--<el-table-column prop="id" label="ID"  >-->
            <!--</el-table-column>-->
            <el-table-column prop="name" label="宠物名"   >
            </el-table-column>
            <el-table-column prop="saleprice" label="售价"   >
            </el-table-column>
            <el-table-column prop="costprice" label="成本价"  >
            </el-table-column>
            <el-table-column  prop="type.name" label="宠物类型"  >
            </el-table-column>
            <el-table-column  label="发布寻主的用户"  >
                <template scope="scope">
                    <span>{{scope.row.user?(scope.row.user.username||scope.row.user.phone||scope.row.user.email):''}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sourceType" label="来源"  >
                <template scope="scope">
                    <span v-if="scope.row.sourceType == 1">寻主</span>
                    <span v-else-if="scope.row.sourceType == 2">街边</span>
                    <span v-else-if="scope.row.sourceType == 3">饲养场</span>
                    <span v-else-if="scope.row.sourceType == 4">配种</span>
                </template>
            </el-table-column>
            <el-table-column prop="createtime" label="创建时间"  >
            </el-table-column>
            <el-table-column prop="offsaletime" label="下架时间"  >
            </el-table-column>
            <el-table-column prop="onsaletime" label="上架时间"  >
            </el-table-column>

            <el-table-column prop="state" label="状态" >
                <template scope="scope">
                    <span v-if="scope.row.state == 1" style="color: green">上架</span>
                    <span v-else-if="scope.row.state == 0" style="color: red">下架</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pigeSize" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑添加界面-->
        <el-dialog :title=title :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="来源" >
                    <!--<el-input v-model="form.sourceType" autocomplete="off"></el-input>-->
                        <el-select v-model="form.sourceType" :disabled=disable placeholder="请选择来源">
                            <el-option label="寻主" value="1" :disabled="true"></el-option>
                            <el-option label="街边" value="2"></el-option>
                            <el-option label="饲养场" value="3"></el-option>
                            <el-option label="配种" value="4"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="宠物名" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="costprice">
                    <el-input v-model="form.costprice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="售价" prop="saleprice">
                    <el-input v-model="form.saleprice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="宠物类型">
                    <el-input v-model="form.typename" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="宠物介绍" prop="intro" >
                    <quill-editor :options="editorOption" v-model="form.intro">
                    </quill-editor>
                </el-form-item>
                <el-form-item label="领养须知" prop="adoptNotice" >
                    <quill-editor :options="editorOption" v-model="form.adoptNotice">
                    </quill-editor>
                </el-form-item>
                <el-form-item prop="logo" label="宠物图片">
                    <el-upload
                            class="upload-demo"
                            action="/api/fastdfs/upload"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :file-list="fileList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addsj" >确 定</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    //引入富文本框
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import quillConfig from "../../common/js/quill-config"
    export default{
        //申明组件
        components: {
            quillEditor//quillEditor:quillEditor
        },
        data(){
            return{
                //校验
                rules: {
                    name: [
                        {required: true, message: '请输入宠物名', trigger: 'blur'},
                    ],
                },
                //下拉框禁用
                disable:false,
                //富文本框属性
                editorOption:quillConfig,
                //标题
                title:'',
                pet:[],
                //加载框 true为显示
                listLoading:false,
                //批量选择的数据
                sels:[],
                //总条数
                total:0,
                //每页条数
                pigeSize:10,
                //当前页
                currentPage:1,
                //高级查询
                filters:{
                    name:''
                },
                //选择启用禁用 单选框
                radio: '',
                //添加修改模态框默认false关闭
                dialogFormVisible:false,
                //添加修改模态框中的数据
                form:{
                    id:'',
                    name:'',
                    sourceType:'',  //来源
                    costprice:'',   //成本价
                    typeid:'',
                    saleprice:'',   //售价
                    resources:'',   //图片
                    typename:'',

                },
                fileList:[],    //图片数组
            }
        },methods:{
            //图片成功
            handleSuccess(){},
            //移除图片
            handleRemove(){},
            //添加表单数据
            addsj(){
                //封装宠物详情detail
                let detail = {"adoptNotice":this.form.adoptNotice,"intro":this.form.intro};
                this.form.detail = detail;
                //封装宠物类型type
                let type = {"id":this.form.typeid}
                this.form.type = type;
                //判断是否必填项输入值
                this.$refs["form"].validate((valid) => {    
                    if (valid) {
                        console.debug(this.form);
                        //发送请求
                        this.$http.put("/pet",this.form).then(res=>{
                            let {message,success} = res.data;
                            if(success){
                                this.loadPet();
                                //关闭添加修改框
                                this.dialogFormVisible = false;
                            }
                        }).catch()
                    }
                });
            },
            //发送查询请求
            getUsers(){     
                //改变当前页
                this.currentPage = 1;
                this.loadPet();
            },
            //添加数据
            handleAdd(){
                this.title = "添加宠物";
                this.dialogFormVisible = true;
                if(this.$refs["form"]){     //判断是否校验有值，有值才清空
                    this.$refs["form"].resetFields();
                }
                //清空
                for(var k in this.form){
                    this.form[k] = '';
                }
            },
            //点击前面复选框触发
            selsChange(rows){       
                this.sels = rows;
            },
            //点击批量删除触发
            batchRemove(){    
                let delpamar = this.sels;
                this.$http.post("/pet/batch",delpamar).then(res=>{
                    if(res.data.success){
                        this.loadPet()
                    }
                }).catch()
            },
            //改变当前页触发
            handleCurrentChange(val){    
                this.currentPage = val;
                this.loadPet();
            },
            //编辑触发
            handleEdit(index,row){
                this.dialogFormVisible = true;
                if(this.$refs["form"]){     //判断是否校验有值，有值才清空
                    this.$refs["form"].resetFields();
                }
                //回显赋值(普通属性)
                for(var k in this.form){
                    this.form[k] = row[k]
                }
                if(row.detail){
                    this.form.intro = row.detail.intro;
                    this.form.adoptNotice = row.detail.adoptNotice;
                }
                this.form.typeid =row.type.id;
                this.form.typename = row.type.name;
                if(row.sourceType==1){
                    this.disable = true;
                }else{
                    this.disable = false;
                }
                this.form.sourceType = row.sourceType.toString();
            },
            //删除触发
            handleDel(index,row){         
                //console.debug(index);
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(()=>{
                    this.$http.post("/pet/delOne",{"id":row.id}).then(res=>{
                        // console.debug(res);
                        let {message,success} = res.data;
                        if(success){
                            this.$message({
                                message: message,
                                type: 'success'
                            });
                            this.loadPet();
                        }
                    }).catch()
                }).catch(()=>{
                    this.$message({
                        message: '取消操作',
                    })}
                )
            },
            //发送请求
            loadPet(){  
                //准备当前页和每页条数参数
                let cx = {
                    state:this.radio,
                    pageSize:this.pigeSize,
                    currentPage:this.currentPage,
                    name:this.filters.name

                };
                this.$http.post("/pet",cx).then(res=>{
                    console.debug(res);
                    //console.debug(res.data.totals)
                    this.pet = res.data.data;    //数据
                    this.total = res.data.totals;       //总条数
                })

            }
        },mounted(){    //钩子方法
            this.loadPet();
        }
    }
</script>